<template>
    <div
      class="modal"
      :style="{width:`${width}px`, height:`${height}px`, top:`${top}px`, left:`${left}px`,zIndex: zIndex}"
      @mousedown="toggleZIndex"
    >
      <div
        class="head noselect"
        @mousedown="mousedown"
        @mousemove="mousemove"
        @mouseup="mouseup"
        @mouseout="mouseup"
      >
        {{title}}
        <div class="close" @click="removeModal">
          <i class="iconfont iconbaseline-close-px"></i>
        </div>
      </div>
      <div class="content">
        <modals></modals>
      </div>
    </div>
</template>

<script>
import modals from "@/components/modal";
console.log(modals);
export default {
  name: "modal",
  props: {
    title: {
      default: 'title'
    },
    width:{
      default: 300
    },
    height:{
      default: 260
    },
    top:{
      default: 260
    },
    left:{
      default: 260
    },
    zIndex:{
      default: 99
    }
   
  },
  data() {
    return {
      number: 0,
      prveDian: {
        x: 0,
        y: 0
      }
    };
  },
  components: {
    modals
  },
  methods: {
    addModal(size, msg) {
      let width, height;
      let top = parseInt(window.innerHeight / 2) + this.list.length * 30;
      let left = parseInt(window.innerWidth / 2) + this.list.length * 30;
     

      switch (size) {
        case "min":
          width = 300;
          height = 260;
          break;
        case "middle":
          width = 500;
          height = 400;
          break;
        case "max":
          width = 800;
          height = 500;
          break;
        default:
          width = 200;
          height = 260;
          break;
      }

      top -= height / 2;
      left -= width / 2;

      this.list.push({
        id: this.number,
        name: msg,
        top,
        left,
        width,
        height,
        zIndex: this.list.length
      });
      this.number++;
    },
    test(type, msg, title) {
      console.log(msg);
      this.addModal(type, msg);
    },
    toggleZIndex(item) {
      this.removeModal(item);
      this.list.push(item);
      this.list.forEach((item, index) => {
        item.zIndex = index;
      });
    },
    removeModal(item) {
      this.list.splice(this.list.indexOf(item), 1);
    },
    mousedown() {
      this.isMouse = true;
      this.prveDian.x = event.clientX;
      this.prveDian.y = event.clientY;
    },
    mousemove(item) {
      if (this.isMouse) {
        if (this.prveDian.x && this.prveDian.y) {
          item.top += event.clientY - this.prveDian.y;
          item.left += event.clientX - this.prveDian.x;
        }
        this.prveDian.x = event.clientX;
        this.prveDian.y = event.clientY;
      }
    },
    mouseup() {
      this.isMouse = false;
      this.prveDian.x = 0;
      this.prveDian.y = 0;
    }
  }
};
</script>
<style scoped lang="scss">
.modal {
  position: fixed;
  background-color: #fff;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
  .head {
    height: 30px;
    width: 100%;
    background-color: #28bc9c;
    position: relative;
    line-height: 30px;
    text-align: center;
    color: #fff;
    font-size: 14px;

    .close {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 0;
      right: 0;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
      i {
        font-size: 18px;
        color: #fff;
      }
    }
  }
  .content {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px;
  }
}

</style>
